<template>
  <div class="space-y-2">
    <h3 class="text-lg font-semibold text-gray-900">Design Colors</h3>
    <div class="max-h-[144px] overflow-y-auto pr-2 space-y-2 scrollbar-thin">
      <div v-for="path in pathColors" :key="path.id" class="flex items-center justify-between">
        <span class="text-sm text-gray-700">{{ path.name }}</span>
        <div class="relative">
          <button
              @click="toggleColorPicker(path.id)"
              class="flex items-center space-x-2 px-3 py-2 border border-gray-300 rounded-md hover:bg-gray-50 bg-white"
          >
            <div
                class="w-6 h-6 rounded-full border border-gray-200"
                :style="{
                backgroundColor: path.fill,
                boxShadow: path.fill === '#FFFFFF' ? 'inset 0 0 0 1px #E5E7EB' : undefined
              }"
            />
            <span class="text-sm text-gray-700">
              {{ getColorName(path.fill) }}
            </span>
          </button>

          <el-dialog
              title="Select Color"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
            <div class="grid grid-cols-5 gap-3">
              <div
                  v-for="{ hex, name } in COLORS"
                  :key="name"
                  @click="handleColorSelect(hex)"
                  class="group w-[58px] h-[58px] relative aspect-square rounded-lg transition-transform hover:scale-105 border-0 cursor-pointer"
                  :class="hex === currentColor ? 'ring-2 ring-indigo-600 ring-offset-2' : ''"
              >
                <div
                    class="w-full h-full rounded-lg border border-gray-200"
                    :style="{
                              backgroundColor: hex,
                              boxShadow: hex === '#FFFFFF' ? 'inset 0 0 0 1px #E5E7EB' : undefined
                            }"
                />
                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                  <div class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                    {{ name }}
                  </div>
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      COLORS: [
        { hex: '#000000', name: 'Black' },
        { hex: '#FFFFFF', name: 'White' },
        { hex: '#FF0000', name: 'Red' },
        { hex: '#00FF00', name: 'Green' },
        { hex: '#0000FF', name: 'Blue' },
        { hex: '#FFFF00', name: 'Yellow' },
        { hex: '#FF00FF', name: 'Magenta' },
        { hex: '#00FFFF', name: 'Cyan' },
        { hex: '#FFA500', name: 'Orange' },
        { hex: '#800080', name: 'Purple' },
        { hex: '#008000', name: 'Dark Green' },
        { hex: '#000080', name: 'Navy' },
        { hex: '#800000', name: 'Maroon' },
        { hex: '#808000', name: 'Olive' },
        { hex: '#008080', name: 'Teal' },
      ],
      activeColorPicker: null,
      dialogVisible: false,
      currentColor: ''
    };
  },
  computed: {
    ...mapState('colors', ['pathColors', 'selectColor']),
  },
  created() {
    console.log('6660', this.selectColor)
    this.COLORS = this.selectColor
  },
  methods: {
    ...mapActions('colors', ['updatePathColor']),
    toggleColorPicker(pathId) {
      this.activeColorPicker = this.activeColorPicker === pathId ? null : pathId;
      this.dialogVisible = true
    },
    updateColor(pathId, color) {
      this.updatePathColor({ id: pathId, fill: color });
      this.activeColorPicker = null;
    },
    getColorName(hex) {
      const color = this.COLORS.find(c => c.hex === hex);
      return color ? color.name : 'Custom';
    },
    handleColorSelect(hex) {
      this.updateColor(this.activeColorPicker, hex)
      this.handleClose()
    },
    handleClose() {
      this.dialogVisible = false
      this.activeColorPicker = null
    }
  },
};
</script>

<style scoped>
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
</style>